<template>
  <div class="common-select">
    <el-select
      v-model="data.value"
      :placeholder="props.placeholder"
      @change="handleChange"
    >
      <el-option
        v-for="item in props.optionsList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, watch } from 'vue'
import { CaretBottom } from '@element-plus/icons-vue'
const props = defineProps(['value', 'optionsList', 'placeholder'])
const emits = defineEmits(['update:value', 'change'])
const data = reactive({
  value: undefined
})
watch(
  () => props,
  (newVal, oldVal) => {
    console.log('newVal:', newVal)
    data.value = props.value
  },
  {
    immediate: true,
    deep: true
  }
)

const handleChange = (value) => {
  console.log('handleChange:', value)
  emits('update:value', value)
  emits('change', value)
}
onMounted(() => {})
</script>

<style lang="less">
.common-select {
  // 修改element
  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  background: rgba(15, 34, 66, 0.5);

  box-sizing: border-box;
  border: 1px solid #9BCFFF;
  width: 82px;
  height: 26px;
  border-radius: 2px;
  color: #9BCFFF;

  .el-select {
    .el-input__inner {
      height: 28px !important;
    }
    .el-input__wrapper {
      border: none !important;
      background: transparent;
      box-shadow: none !important;
      border-radius: 0 !important;
      > input {
        color: #9BCFFF !important;
      }
    }
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: none !important;
  }
}
.el-popper.is-light{
  padding: 10px !important;
  background: rgba(15, 34, 66, 0.8);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.12);
  border: none;
}
.el-select-dropdown__item{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #98A7AD;
  border-radius: 4px;
}
.el-select-dropdown__item.selected{
  color: #ADDDFF;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background: #ADDDFF;
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  line-height: 14.04px;
  letter-spacing: 0em;
  color: #223744;
}
.el-popper__arrow{
  display: none;
}
.el-select .el-input .el-select__caret.el-icon{
  color: #9BCFFF!important;
}
</style>
